<template>
  <div class="addposiman">
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
      <el-row :gutter="15">
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="缺陷编号：" prop="qxbh">
                <el-input v-model="formData.qxbh" placeholder clearable :style="{width: '100%'}" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="缺陷设备：" prop="qxsb">
                <el-input v-model="formData.qxsb" placeholder clearable :style="{width: '100%'}" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="站线类型：" prop="zxlx">
                <el-input
                  v-model="formData.zxlx"
                  placeholder="请输入设备名称"
                  clearable
                  :style="{width: '100%'}"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="电站名称：" prop="dzmc">
                <el-input v-model="formData.dzmc" placeholder clearable :style="{width: '100%'}" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="电压等级：" prop="dydj">
                <el-select
                  v-model="formData.dydj"
                  size="small"
                  placeholder="请选择"
                  :style="{width: '100%'}"
                >
                  <el-option
                    v-for="item in voltagelevel_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="设备类型：" prop="sblx">
                <el-select
                  v-model="formData.sblx"
                  size="small"
                  placeholder="请选择"
                  :style="{width: '100%'}"
                >
                  <el-option
                    v-for="item in equipmenttype_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="设备种类：" prop="sbzl">
                <el-select
                  v-model="formData.sbzl"
                  size="small"
                  placeholder="请选择"
                  :style="{width: '100%'}"
                >
                  <el-option
                    v-for="item in equipmentkind_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="设备型号：" prop="sbxh">
                <el-input v-model="formData.sbxh" placeholder clearable :style="{width: '100%'}" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="生产厂家：" prop="sccj">
                <el-input
                  v-model="formData.sccj"
                  placeholder="请输入设备名称"
                  clearable
                  :style="{width: '100%'}"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="部件：" prop="bj">
                <el-select
                  v-model="formData.bj"
                  size="small"
                  placeholder="请选择"
                  :style="{width: '100%'}"
                >
                  <el-option
                    v-for="item in parts_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="部件种类：" prop="bjzl">
                <el-select
                  v-model="formData.bjzl"
                  size="small"
                  placeholder="请选择"
                  :style="{width: '100%'}"
                >
                  <el-option
                    v-for="item in partskind_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="投运日期：" prop="tyrq">
                <el-date-picker
                  v-model="formData.tyrq"
                  type="date"
                  placeholder="选择日期"
                  :style="{width: '100%'}"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="发现方式：" prop="fxfs">
                <el-select
                  v-model="formData.fxfs"
                  size="small"
                  placeholder="请选择"
                  :style="{width: '100%'}"
                >
                  <el-option
                    v-for="item in discovery_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发现人：" prop="fxr">
                <el-input v-model="formData.fxr" placeholder clearable :style="{width: '100%'}" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发现日期：" prop="fxrq">
                <el-date-picker
                  v-model="formData.fxrq"
                  type="date"
                  placeholder="选择日期"
                  :style="{width: '100%'}"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="发现班组：" prop="fxbz">
                <el-input v-model="formData.fxbz" placeholder clearable :style="{width: '100%'}" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发现人单位：" prop="fxrdw">
                <el-input v-model="formData.fxrdw" placeholder clearable :style="{width: '100%'}" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="填报时间：" prop="tbsj">
                <el-date-picker
                  v-model="formData.tbsj"
                  type="date"
                  placeholder="选择日期"
                  :style="{width: '100%'}"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="缺陷部位：" prop="qxbw">
                <el-select
                  v-model="formData.qxbw"
                  size="small"
                  placeholder="请选择"
                  :style="{width: '100%'}"
                >
                  <el-option
                    v-for="item in defectparts_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="缺陷描述：" prop="qxms">
                <el-input v-model="formData.qxms" placeholder clearable :style="{width: '100%'}" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="缺陷性质：" prop="qxxz">
                <el-select
                  v-model="formData.qxxz"
                  size="small"
                  placeholder="请选择"
                  :style="{width: '100%'}"
                >
                  <el-option
                    v-for="item in defectnature_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="分类依据：" prop="flyj">
                <el-input v-model="formData.flyj" placeholder clearable :style="{width: '100%'}" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="缺陷内容：">
                <el-input v-model="formData.qxnr" placeholder clearable :style="{width: '100%'}" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="24">
              <div class="addposiman-btn">
                <el-button class="table-query" type="primary" @click="submitForm">保存</el-button>
                <el-button class="table-query" type="primary" @click="clsoe">取消</el-button>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
interface optionList {
  value: string;
  label: string;
}
@Component
export default class addposiman extends Vue {
  formData: Object = {
    qxbh: "",
    qxsb: "",
    zxlx: "",
    dzmc: "",
    dydj: "",
    sblx: "",
    sbzl: "",
    sbxh: "",
    sccj: "",
    bj: "",
    bjzl: "",
    tyrq: "",
    fxfs: "",
    fxr: "",
    fxrq: "",
    fxbz: "",
    fxrdw: "",
    tbsj: "",
    qxbw: "",
    qxms: "",
    qxxz: "",
    flyj: "",
    qxnr: "",
  };
  rules = {
    qxbh: [{ required: true, message: "请输入内容", trigger: "blur" }],
    qxsb: [{ required: true, message: "请输入内容", trigger: "blur" }],
    zxlx: [{ required: true, message: "请输入内容", trigger: "blur" }],
    sblx: [{ required: true, message: "请输入内容", trigger: "blur" }],
    fxfs: [{ required: true, message: "请输入内容", trigger: "blur" }],
    fxr: [{ required: true, message: "请输入内容", trigger: "blur" }],
    fxrq: [{ required: true, message: "请输入内容", trigger: "blur" }],
    fxbz: [{ required: true, message: "请输入内容", trigger: "blur" }],
    fxrdw: [{ required: true, message: "请输入内容", trigger: "blur" }],
    qxxz: [{ required: true, message: "请输入内容", trigger: "blur" }],
    qxnr: [{ required: true, message: "请输入内容", trigger: "blur" }],
  };
  // 电压等级备选项：
  voltagelevel_options: Array<optionList> = [
    {
      value: "",
      label: "全部",
    },
    {
      value: "选项1",
      label: "黄金糕",
    },
    {
      value: "选项2",
      label: "双皮奶",
    },
  ];
  // 设备类型备选项：
  equipmenttype_options: Array<optionList> = [
    {
      value: "",
      label: "全部",
    },
    {
      value: "选项1",
      label: "黄金糕",
    },
    {
      value: "选项2",
      label: "双皮奶",
    },
  ];
  // 设备种类备选项：
  equipmentkind_options: Array<optionList> = [
    {
      value: "",
      label: "全部",
    },
    {
      value: "选项1",
      label: "黄金糕",
    },
    {
      value: "选项2",
      label: "双皮奶",
    },
  ];
  // 部件备选项：
  parts_options: Array<optionList> = [
    {
      value: "",
      label: "全部",
    },
    {
      value: "选项1",
      label: "黄金糕",
    },
    {
      value: "选项2",
      label: "双皮奶",
    },
  ];
  // 部件种类备选项：
  partskind_options: Array<optionList> = [
    {
      value: "",
      label: "全部",
    },
    {
      value: "选项1",
      label: "黄金糕",
    },
    {
      value: "选项2",
      label: "双皮奶",
    },
  ];
  // 发现方式备选项：
  discovery_options: Array<optionList> = [
    {
      value: "",
      label: "全部",
    },
    {
      value: "选项1",
      label: "黄金糕",
    },
    {
      value: "选项2",
      label: "双皮奶",
    },
  ];
  // 缺陷部位备选项：
  defectparts_options: Array<optionList> = [
    {
      value: "",
      label: "全部",
    },
    {
      value: "选项1",
      label: "黄金糕",
    },
    {
      value: "选项2",
      label: "双皮奶",
    },
  ];
  // 缺陷性质备选项：
  defectnature_options: Array<optionList> = [
    {
      value: "",
      label: "全部",
    },
    {
      value: "选项1",
      label: "黄金糕",
    },
    {
      value: "选项2",
      label: "双皮奶",
    },
  ];

  $refs!: {
    elForm: any;
  };
  //创建
  clsoe() {
    this.$emit("close");
  }
  submitForm() {
    this.$refs.elForm.validate((valid: any) => {
      if (!valid) {
        this.$message({
          type: "warning",
          message: "表单校验不通过",
        });
        return;
      }
      // TODO 提交表单

      // console.log(this.formData);
      this.$emit("close");
    });
  }

  mounted() {
    
  }
}
</script>

<style lang="scss" scoped>
.addposiman {
  width: 100%;
  // height: 400px;
  &-btn {
    width: 100%;
    height: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

